<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="demo/layout1">
    <div th:fragment="content">
        添加销售
        <form action="#" th:action="@{/sale/addSale}" th:object="${sale}"  method="post" onsubmit="return chekForm()">
            <label for="productid">请选择商品</label>
            <select data-placeholder="请选择商品"  id="productid"  name="productid"  required>
                <option   value=""   selected>-请选择商品-</option>
                <option   th:each="product:${productList}" th:value="${product.id}"  th:text="${product.productname}"></option>
            </select>
            <br/>
            <label for="price"> 售价：*</label>
            <input type="text" id="price"  name="price" required />
            <br/>
            <label for="quantity">  数量：*</label>
            <input type="text" id="quantity" name="quantity" required />
            <br/>
            <p>
                <input type="submit" value="保存" />
                <input type="reset" value="重置" />
            </p>
        </form>
        <span th:text="${errorInfo}"></span>
        <script>
            /**
             * 验证form
             * @returns {boolean}
             */
            function chekForm(){
                let price = $("#price").val();
                // 带1-2位小数的正数或负数：
                let pattern = /^(\-)?\d+(\.\d{1,2})$/;
                if(!pattern.test(price)){
                    alert("售价不是带1-2位小数的正数或负数。");
                    return false;
                }
                let quantity = $("#quantity").val();
                // 非负整数：
                pattern = /^[1-9]\d*|0$/;
                if(!pattern.test(quantity)){
                    alert("数量不是非负整数。");
                    return false;
                }
                return true;
            }

            $(function(){

            });

        </script>
    </div>
</html>